<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="html5plus://ready"></script>
		<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
		<style type="text/css">
			/* 重置swiper分页样式 */
			.swiper-pagination-fraction {
				text-align: right;
				right: 20px;
				left: auto;
				background: rgba(0, 0, 0, .1);
				width: auto;
				padding: 0 5px;
				border-radius: 20px;
				font-size: 12px;
				height: 20px;
				line-height: 20px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav mui-bar-transparent bxn2" onclick="backTop()">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		</header>
		<div class="container" v-cloak id="product_detail">

			<div class="mui-content">
				<div class="mall_detail" v-cloak id="shop_product_list">
					<div id="swiper" class="swiper-container mallDline">
						<div class="swiper-wrapper">
							<div class="mall_dpic swiper-slide" v-for="val in banner_img">
								<a><img :src="val" /></a>
							</div>
						</div>
						<!-- 如果需要分页器 -->
						<div class="swiper-pagination"></div>
					</div>
					<div class="mall_dnr">
						<p class="mall_bt">{{product_detail.title}}</p>
						<div class="price_place">
							<span>快递：<em class="red">{{product_detail.shipping_price}}元</em></span>
							<span>发货地：{{product_detail.shipping_address}}</span>
						</div>
						<div class="fengeLine mb0"></div>
						<div class="mui-slider">
							<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
								<a tab-id='1' class="mui-control-item mui-active" @tap="select_tab($event)">商品详情<em></em></a>
								<a tab-id='2' class="mui-control-item" @tap="select_tab($event)">常见问题<em></em></a>
							</div>
							<div class="mui-slider-group">
								<div id="item1" class="mui-slider-item mui-control-content mui-active" v-show="tab_id ==1">
									<div class="mallCont" v-for="val in product_detail.image_detail">
										<img :src="val" />
									</div>
								</div>
								<div id="item2" class="mui-slider-item mui-control-content" v-show="tab_id == 2">
									<div class="mallCont" v-for="val in product_detail.question">
										<img :src="val" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--底部固定层-->
			<div class="fix_price" v-cloak id="fix_price">
				<div class="fix_box">
					<div class="fix_lp">
						<p class="fix_lp_mallP">
							<span class="fix_free"><em>￥</em>{{product_detail.price}}</span>
						</p>
					</div>
					<div class="fix_mp">
						<p class="qq_kefu" @tap="qq">
							<a class="mui-icon mui-icon-consultation"></a>
							<span>客服</span>
						</p>
						<p class="favorite" :flag="flag" @tap="favorite(product_detail.id,product_detail)">
							<a v-if="loginSta =='0'" class="mui-icon mui-icon-collect"></a>
							<a v-else-if="loginSta =='1' && collection_status =='NO'" class="mui-icon mui-icon-collect"></a>
							<a v-else-if="loginSta =='1' && collection_status =='YES'" class="mui-icon mui-icon-collected orange"></a>
							<span class="sc_txt">收藏</span>
						</p>
					</div>
					<div class="fix_rp fixStudyBtn">
						<a class="readBtn fixMallBtn" @tap="buy">购买</a>
					</div>
				</div>
			</div>

			<!--购买弹出层-->
			<div class="popMask" @tap="hideMask"></div>
			<div class="popBuy">
				<div class="popBuyInfo">
					<div class="buyInfo buyInfo1" @tap="buyInfo">
						<h4>规格</h4>
						<p>
							<a v-for="val in sku" :tab-index="val.id" @tap="select_sku($event)" :class="(sku_id== val.id) ? 'active':''"
							 :tab-sku="val.specification" :tab-price="val.price">{{val.specification}}</a>
						</p>
					</div>
					<div class="buyInfo buyInfo2">
						<h4>数量</h4>
						<div class="shuliang">
							<!--<a class="decrease" @tap="decrease($event)">-</a><input class="num_Input" type="number" name="" id=""  value="1" /><a class="increase($event)" @tap="increase">+</a>-->
							<a class="decrease" @tap="decrease($event)">-</a><input type="text" readonly="readonly" class="num_Input"
							 v-model.trim="buy_num" :value="buy_num" /><a class="increase($event)" @tap="increase">+</a>
						</div>
					</div>
					<div class="buyInfo buyInfo3">
						<h4>总额</h4>
						<p v-for="val in sku" v-if="val.id == sku_id" :tab-val="val.id">￥{{total}}</p>
					</div>
				</div>
				<div class="fix_buy_btn" @tap="fix_buy_btn(title,buy_num,tab_price,shipping_price,sku_id,image)">
					<a>购买</a>
				</div>
			</div>
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../../js/jquery.min.js"></script>
		<script type="text/javascript" src="../../../js/h.min.js"></script>
		<script type="text/javascript" src="../../../js/swiper.min.js"></script>
		<script type="text/javascript" src="../../../js/tpl/mallDetail.js"></script>
		<script src="../../../js/vue.js"></script>
		<script src="../../../js/public.js"></script>
		<script src="../../../js/plusShare.js"></script>
	</body>

</html>
